{if condition="$isExpired"}
<div class="alert alert-warning" style="margin: 15px;">
    <i class="fa fa-exclamation-triangle"></i>
    <strong>注意：</strong>该课程事件已过期，您只能查看相关信息，无法进行修改操作。
</div>
{/if}

<div class="panel-body">
    <!-- 选项卡导航 -->
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active">
            <a href="#event-settings" aria-controls="event-settings" role="tab" data-toggle="tab">
                <i class="fa fa-cog"></i> 事件设置
            </a>
        </li>
        <li role="presentation">
            <a href="#event-registration" aria-controls="event-registration" role="tab" data-toggle="tab">
                <i class="fa fa-list-alt"></i> 事件登记
            </a>
        </li>
        <li role="presentation">
            <a href="#event-statistics" aria-controls="event-statistics" role="tab" data-toggle="tab">
                <i class="fa fa-bar-chart"></i> 事件统计
            </a>
        </li>
    </ul>
    
    <form id="edit-form" class="form-horizontal" style="position:relative;background: #fff{if condition='$isExpired'}; pointer-events: none; opacity: 0.7;{/if}" role="form" data-toggle="validator" method="POST" action="">
        <!--script data-main="/assets/js/main" src="/assets/js/require.min.js"></script-->
        <!--script-- src="/assets/js/axios.min.js"></script-->
        
        <!-- 选项卡内容 -->
        <div class="tab-content">
            <!-- 第一个选项卡：事件设置 -->
            <div role="tabpanel" class="tab-pane fade active in" id="event-settings">
                <input type="hidden" id="row" name="data" value='<?php echo json_encode($row ?? []);?>' />
                <input type="hidden" id="id" name="row[id]" value='{$row.id|default=""}' />

                <fieldset>
                    <legend>基本信息</legend>
                    <div class="form-group">
                        <label for="c-table_id" class="control-label col-xs-12 col-sm-2">事项名称:</label>
                        <div class="col-xs-12 col-sm-8" id="div-table_id">
                            <input type="hidden" id="table_id" name="row[table_id]" value='{$row.table_id}'/>
                            <div class="title">{$table_id_name}</div>
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <legend>课程信息</legend>
                    <div class="form-group">
                        <label for="c-table_id" class="control-label col-xs-12 col-sm-2">课程名称:</label>
                        <div class="col-xs-12 col-sm-8" id="div-event_name">
                            <input type="text" id="event_name" name="row[event_name]" class="form-control" readonly value='{$row.event_name}'/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="c-ocourse_logo" class="control-label col-xs-12 col-sm-2">课程封面:</label>
                        <div class="col-xs-12 col-sm-8" id="div-school_logo" >
                            <div class="form-inline">
                                <img src="{$row.ocourse_logo}" id="c-event_logo" class="img-thumbnail" style="width:128px;height:128px">
                              </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="c-table_id" class="control-label col-xs-12 col-sm-2">课程内容:</label>
                        <div class="col-xs-12 col-sm-8" id="div-eval_content">
                            <textarea type="text" id="event_content" name="row[event_content]" class="form-control" style="height:128px" readonly disabled>{$row.event_content}</textarea>
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <legend>班级信息</legend>
                    <div class="form-group">
                        <label for="c-classes_id" class="control-label col-xs-12 col-sm-2">班名:</label>
                        <div class="col-xs-12 col-sm-8" id="div-classes_id">
                            <input type="hidden" id="classes_id" name="row[classes_id]" value='{$row.table_id}'/>
                            <select name="row[classes_id]" id="c-classes_id" class="form-control" disabled></select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="c-ocation_id" class="control-label col-xs-12 col-sm-2">教室:</label>
                        <div class="col-xs-12 col-sm-8" id="div-ocation_id">
                            <input type="hidden" id="ocation_id" name="row[ocation_id]" value='{$row.ocation_id}'/>
                            <select name="row[ocation_id]" id="c-ocation_id" class="form-control">
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="c-date" class="control-label col-xs-12 col-sm-2">日期:</label>
                        <div class="col-xs-12 col-sm-8" id="div-date">
                            <div class="form-inline">
                                <input type="text" id="c-date" name="row[date]" value="{$row.date}"
                                       class="form-control datetimepicker" data-date-format="YYYY-MM-DD" data-tip="日期"
                                       data-rule=""/>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="c-week" class="control-label col-xs-12 col-sm-2">周几:</label>
                        <div class="col-xs-12 col-sm-8" id="div-week">
                            <input type="text" id="c-week" name="row[week]" value="{$row.week}" class="form-control"
                                   title="week" placeholder="" data-rule="" data-tip="周几"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="c-start_time" class="control-label col-xs-12 col-sm-2">时段:</label>
                        <div class="col-xs-12 col-sm-8 heng" id="div-daytime">
                            <input type="text" id="c-start_time" name="row[start_time]" value="{$row.start_time}"
                                   class="form-control"/><span>到</span>
                            <input type="text" id="c-end_ime" name="row[end_time]" value="{$row.end_time}"
                                   class="form-control" value="{$row.end_time}"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="c-oindex" class="control-label col-xs-12 col-sm-2">课节:</label>
                        <div class="col-xs-12 col-sm-8" id="div-oindex">
                            <input type="text" id="c-oindex" name="row[class_index]" value="{$row.class_index}"
                                   class="form-control" title="oindex" placeholder="" data-rule="" data-tip="课节"/>
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <legend>参数设置</legend>
                    <div class="form-group">
                        <label for="prechenkintime" class="control-label col-xs-12 col-sm-2">课前打卡时间:</label>
                        <div class="col-xs-12 col-sm-8" id="div-prechenkintime">
                            <input type="text" id="prechenkintime" name="row[prechenkintime]" class="form-control" value='{$row.prechenkintime}'/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="prechenkouttime" class="control-label col-xs-12 col-sm-2">课后打卡时间:</label>
                        <div class="col-xs-12 col-sm-8" id="div-prechenkouttime">
                            <input type="text" id="prechenkouttime" name="row[prechenkouttime]" class="form-control" value='{$row.prechenkouttime}'/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="evalstart" class="control-label col-xs-12 col-sm-2">评价开始时间:</label>
                        <div class="col-xs-12 col-sm-8" id="div-evalstart">
                            <input type="text" id="evalstart" name="row[evalstart]" class="form-control" value='{$row.evalstart}'/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="evalend" class="control-label col-xs-12 col-sm-2">评价结束时间:</label>
                        <div class="col-xs-12 col-sm-8" id="div-evalend">
                            <input type="text" id="evalend" name="row[evalend]" class="form-control" value='{$row.evalend}'/>
                        </div>
                    </div>
                </fieldset>
                <fieldset id="app">
                    <legend>老师模式</legend>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">老师岗:</label>
                        <div class="col-xs-12 col-sm-8" id="div-teacher">
                            <teacher-box :type="''" :left-options="leftOptions" :right-options="rightOptions"></teacher-box>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">管理岗:</label>
                        <div class="col-xs-12 col-sm-8" id="div-manger">
                            <manager-box :type="''" :left-options="leftOptions" :right-options="rightOptions"></manager-box>
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <legend>教学点</legend>
                    <div class="form-group">
                        <label for="c-addresslv_id_A" class="control-label col-xs-12 col-sm-2">一级教学点:</label>
                        <div class="col-xs-12 col-sm-8" id="div-addresslv_id_A">
                            <input type="text" id="c-addresslv_id_A"  class="form-control" name="row[addresslv_id_A]" value='{$row.addresslv_id_A}'readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="c-addresslv_id_B" class="control-label col-xs-12 col-sm-2">二级教学点:</label>
                        <div class="col-xs-12 col-sm-8" id="div-addresslv_id_B">
                            <input type="text" id="c-addresslv_id_B"  class="form-control" name="row[addresslv_id_B]" value='{$row.addresslv_id_B}' readonly />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="c-address" class="control-label col-xs-12 col-sm-2">上课地点:</label>
                        <div class="col-xs-12 col-sm-8" id="div-address">
                            <input type="text" id="c-address" name="row[address]" class="form-control" value='{$row.address}' />
                        </div>
                    </div>
                </fieldset>
                <fieldset>
                    <legend>课堂信息</legend>
                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">课堂类型:</label>
                        <div class="col-xs-12 col-sm-8" id="div-course_type">
                             <?php
                             $adminGroupId = $admin['group_id'] ?? 0;
                             $rowCourseType = $row['course_type'] ?? null;
                             if ($adminGroupId === 3 || $adminGroupId === 2 || $adminGroupId === 1):
                             ?>
                             <label for="row[course_type]-1"><input id="row[course_type]-1" name="row[course_type]"  readonly disabled  type="radio" value="1" <?php if ($rowCourseType === 1) echo 'checked'; ?>/> 学校课堂</label>
                             <?php endif; ?>
                             <?php if ($adminGroupId === 8 || $adminGroupId === 2 || $adminGroupId === 1): ?>
                             <label for="row[course_type]-2"><input id="row[course_type]-2" name="row[course_type]"  readonly disabled  type="radio" value="2" <?php if ($rowCourseType === 2) echo 'checked'; ?>/> 社区课堂</label>
                             <?php endif; ?>
                             <label for="row[course_type]-3"><input id="row[course_type]-3" name="row[course_type]" readonly disabled   type="radio" value="3" <?php if ($rowCourseType === 3) echo 'checked'; ?>/> 校外课堂</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="c-subjectlv_id_A" class="control-label col-xs-12 col-sm-2">一级学科:</label>
                        <div class="col-xs-12 col-sm-8" id="div-subjectlv_id_A">
                            <input type="text" id="c-subjectlv_id_A"  class="form-control" name="row[subjectlv_id_A]" value='{$row.subjectlv_id_A}' readonly/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="c-subjectlv_id_B" class="control-label col-xs-12 col-sm-2">二级学科:</label>
                        <div class="col-xs-12 col-sm-8" id="div-subjectlv_id_B">
                            <input type="text" id="c-subjectlv_id_B"  class="form-control" name="row[subjectlv_id_B]" value='{$row.subjectlv_id_B}' readonly/>
                        </div>
                    </div>
                </fieldset>

                <fieldset>
                    <legend>课程日期筛选</legend>
                    <div class="form-group">
                        <label for="c-ocourse_count" class="control-label col-xs-12 col-sm-2">课程长度:</label>
                        <div class="col-xs-12 col-sm-8" id="div-ocourse_count" >
                            <input type="number" id="c-ocourse_count" name="row[ocourse_count]" value="{$row.ocourse_count}" class="form-control" title="ocourse_count" data-rule="require num" data-rule-num="[/^[0-9\.]+$/, '只能填入数值']" placeholder="只能填入数值"  data-tip="课程长度" disabled />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="c-classes_per_week" class="control-label col-xs-12 col-sm-2">一周几次课:</label>
                        <div class="col-xs-12 col-sm-8" id="div-classes_per_week" >
                            <input type="number" id="c-classes_per_week" name="row[classes_per_week]" value="{$row.classes_per_week}" class="form-control" title="ocourse_count" data-rule="require num" data-rule-num="[/^[0-9\.]+$/, '只能填入数值']" placeholder="只能填入数值"  data-tip="课程长度" disabled />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="c-ocourse_count" class="control-label col-xs-12 col-sm-2">时点:</label>
                        <div class="col-xs-12 col-sm-8 heng" >
                            <input type="text" id="c-week" name="row[week]" value="{$row.week}" class="form-control" data-rule="require" style="width:55px" disabled />
                            <input type="text" id="c-daytime" name="row[daytime]" value="{$row.daytime}" class="form-control" data-rule="require"  style="width:55px" disabled />
                            <span>第</span><input type="text" id="c-oindex" name="row[oindex]" value="{$row.oindex}" class="form-control" data-rule="require"  style="width:55px" disabled /><span>节课</span>
                            <span>上课时间</span><input type="text" id="c-start_time" name="row[start_time]" value="{$row.start_time}" class="form-control" data-rule="require "  style="width:60px" disabled /><span>到</span>
                            <input type="text" id="c-end_time" name="row[end_time]" value="{$row.end_time}" class="form-control" data-rule="require "  style="width:60px" disabled />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="c-ocourse_count" class="control-label col-xs-12 col-sm-2">起始日期:</label>
                        <div class="col-xs-12 col-sm-8 heng" >
                            <input type="text" id="c-start_date" name="row[start_date]" value="{$row.start_date}" class="form-control" data-rule="require"  disabled />
                            <span>到</span><input type="text" id="c-end_date" name="row[end_date]" value="{$row.end_date}" class="form-control" data-rule="require"  disabled />
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="c-ocourse_count" class="control-label col-xs-12 col-sm-2">是否排除国际假日:</label>
                        <div class="col-xs-12 col-sm-8 heng" >
                            <input type="checkbox" id="c-exclint_holidays" name="row[exclint_holidays]" {if $row.exclint_holidays=="1"}checked{/if} data-rule="require"  disabled />
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="c-same_classroom" class="control-label col-xs-12 col-sm-2">是否同一间教室:</label>
                        <div class="col-xs-12 col-sm-8" id="div-same_classroom">
                            <input id="c-same_classroom" name="row[same_classroom]" type="hidden" value="{$row.same_classroom}">
                            <a href="javascript:;" data-toggle="switcher" class="btn-switcher {if $row.same_classroom=='1'}active{else}text-gray{/if}" data-input-id="c-same_classroom" data-yes="1" data-no="0">
                                <i class="fa fa-toggle-on fa-2x {if $row.same_classroom!='1'}fa-flip-horizontal{/if}"></i>
                            </a>
                            <div data-favisible="switch=1" class="p-3">是</div>
                            <div data-favisible="switch=0" class="p-3">否</div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">是否同一二级教学点:</label>
                        <div class="col-xs-12 col-sm-8" id="div-same_ocation">
                            <input id="c-same_ocation" name="row[same_ocation]" type="hidden" value="{$row.same_ocation}">
                            <a href="javascript:;" data-toggle="switcher" class="btn-switcher {if $row.same_ocation=='1'}active{else}text-gray{/if}" data-input-id="c-same_ocation" data-yes="1" data-no="0">
                                <i class="fa fa-toggle-on fa-2x {if $row.same_ocation!='1'}fa-flip-horizontal{/if}"></i>
                            </a>
                            <div data-favisible="switch=1" class="p-3">是</div>
                            <div data-favisible="switch=0" class="p-3">否</div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-xs-12 col-sm-2">是否能排在同一天:</label>
                        <div class="col-xs-12 col-sm-8" id="div-can_same_day">
                            <input id="c-can_same_day" name="row[can_same_day]" type="hidden" value="{$row.can_same_day}">
                            <a href="javascript:;" data-toggle="switcher" class="btn-switcher {if $row.can_same_day=='1'}active{else}text-gray{/if}" data-input-id="c-can_same_day" data-yes="1" data-no="0">
                                <i class="fa fa-toggle-on fa-2x {if $row.can_same_day!='1'}fa-flip-horizontal{/if}"></i>
                            </a>
                            <div data-favisible="switch=1" class="p-3">是</div>
                            <div data-favisible="switch=0" class="p-3">否</div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="c-daytime" class="control-label col-xs-12 col-sm-2">时段选择:</label>
                        <div class="col-xs-12 col-sm-8" id="div-daytime">
                            <?php $daytimeArray = explode(',', $row['daytime']);?>
                            <label for="row[daytime]-1">
                                <input id="row[daytime]-1" name="row[daytime][]" type="checkbox" readonly disabled
                                       value="1" <?php if(in_array(1, $daytimeArray)): ?>checked<?php endif; ?>/> 上午</label>
                            <label for="row[daytime]-2"><input id="row[daytime]-2" name="row[daytime][]" type="checkbox" readonly disabled
                                <?php if(in_array(2, $daytimeArray)): ?>checked<?php endif; ?>  value="2"/> 中午</label>
                            <label for="row[daytime]-3"><input id="row[daytime]-3" name="row[daytime][]" type="checkbox" readonly disabled
                                <?php if(in_array(3, $daytimeArray)): ?>checked<?php endif; ?>  value="3"/> 下午</label>
                            <label for="row[daytime]-4"><input id="row[daytime]-4" name="row[daytime][]" type="checkbox" readonly disabled
                                <?php if(in_array(4, $daytimeArray)): ?>checked<?php endif; ?>   value="4"/> 晚上</label>
                            <select  id="c-daytime-all"  style="display: none" multiple name="row[daytimeall][]" value="{$row.daytimeall}" class="form-control"  style="height:250px"  data-tip="时段选择"  >
                            </select>
                        </div>

                    </div>
                </fieldset>
                <fieldset>
                    <legend>班级信息</legend>
                   <div class="form-group">
                        <label for="c-bz" class="control-label col-xs-12 col-sm-2">备注:</label>
                        <div class="col-xs-12 col-sm-8" id="div-bz" >
                            <input type="text" id="c-bz" name="row[bz]" value="{$row.bz}" class="form-control" title="bz"  placeholder="" data-rule=""  data-tip="备注"  />
                        </div>
                   </div>

                   <div class="form-group">
                        <label for="c-status" class="control-label col-xs-12 col-sm-2">状态:</label>
                        <div class="col-xs-12 col-sm-8" id="div-status">
                            <input id="c-status" name="row[status]" type="hidden" value="{$row.status}">
                            <a href="javascript:;" data-toggle="switcher" class="btn-switcher {if $row.status=='1'}active{else}text-gray{/if}" data-input-id="c-status" data-yes="1" data-no="0">
                                <i class="fa fa-toggle-on fa-2x {if $row.status!='1'}fa-flip-horizontal{/if}"></i>
                            </a>
                            <div data-favisible="switch=1" class="p-3">已开户</div>                        </div>
                   </div>
                </fieldset>
                <div class="form-group layer-footer">
                    <label class="control-label col-xs-12 col-sm-2"></label>
                    <div class="col-xs-12 col-sm-8">
                        {if condition="$isExpired"}
                        <button type="button" class="btn btn-secondary btn-embossed disabled" disabled>已过期，无法修改</button>
                        <button type="button" class="btn btn-default btn-embossed" onclick="parent.layer.closeAll();">关闭</button>
                        {else /}
                        <button type="submit" class="btn btn-success btn-embossed">{:__('OK')}</button>
                        <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
                        {/if}
                    </div>
                </div>
            </div>
            
            <!-- 第二个选项卡：事件登记 -->
            <div role="tabpanel" class="tab-pane fade" id="event-registration">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <i class="fa fa-clock-o"></i> 上下课时间登记表
                        </h4>
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr class="info">
                                        <th width="80">序号</th>
                                        <th width="100">日期</th>
                                        <th width="120">姓名</th>
                                        <th width="100">角色</th>
                                        <th width="120">上课时间</th>
                                        <th width="120">下课时间</th>
                                        <th width="100">状态</th>
                                        <th>备注</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1</td>
                                        <td>2024-01-15</td>
                                        <td>张老师</td>
                                        <td><span class="label label-primary">主讲老师</span></td>
                                        <td>08:30:15</td>
                                        <td>10:15:30</td>
                                        <td><span class="label label-success">正常</span></td>
                                        <td>按时上下课</td>
                                    </tr>
                                    <tr>
                                        <td>2</td>
                                        <td>2024-01-15</td>
                                        <td>李管理员</td>
                                        <td><span class="label label-info">管理员</span></td>
                                        <td>08:25:10</td>
                                        <td>10:20:45</td>
                                        <td><span class="label label-success">正常</span></td>
                                        <td>提前到达，课后整理</td>
                                    </tr>
                                    <tr>
                                        <td>3</td>
                                        <td>2024-01-15</td>
                                        <td>王同学</td>
                                        <td><span class="label label-warning">学生</span></td>
                                        <td>08:35:20</td>
                                        <td>10:10:15</td>
                                        <td><span class="label label-warning">迟到</span></td>
                                        <td>迟到5分钟，提前离开</td>
                                    </tr>
                                    <tr>
                                        <td>4</td>
                                        <td>2024-01-15</td>
                                        <td>赵同学</td>
                                        <td><span class="label label-warning">学生</span></td>
                                        <td>08:28:45</td>
                                        <td>10:16:20</td>
                                        <td><span class="label label-success">正常</span></td>
                                        <td>按时参与课程</td>
                                    </tr>
                                    <tr>
                                        <td>5</td>
                                        <td>2024-01-15</td>
                                        <td>陈同学</td>
                                        <td><span class="label label-warning">学生</span></td>
                                        <td>--</td>
                                        <td>--</td>
                                        <td><span class="label label-danger">缺席</span></td>
                                        <td>请假缺席</td>
                                    </tr>
                                    <tr>
                                        <td>6</td>
                                        <td>2024-01-22</td>
                                        <td>张老师</td>
                                        <td><span class="label label-primary">主讲老师</span></td>
                                        <td>08:30:00</td>
                                        <td>10:15:45</td>
                                        <td><span class="label label-success">正常</span></td>
                                        <td>准时开课</td>
                                    </tr>
                                    <tr>
                                        <td>7</td>
                                        <td>2024-01-22</td>
                                        <td>李管理员</td>
                                        <td><span class="label label-info">管理员</span></td>
                                        <td>08:20:30</td>
                                        <td>10:25:10</td>
                                        <td><span class="label label-success">正常</span></td>
                                        <td>提前准备，课后清理</td>
                                    </tr>
                                    <tr>
                                        <td>8</td>
                                        <td>2024-01-22</td>
                                        <td>王同学</td>
                                        <td><span class="label label-warning">学生</span></td>
                                        <td>08:30:15</td>
                                        <td>10:15:30</td>
                                        <td><span class="label label-success">正常</span></td>
                                        <td>准时参与</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-primary">
                                        <i class="fa fa-plus"></i> 添加记录
                                    </button>
                                    <button type="button" class="btn btn-success">
                                        <i class="fa fa-download"></i> 导出Excel
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-6 text-right">
                                <nav>
                                    <ul class="pagination pagination-sm">
                                        <li class="disabled"><a href="#">«</a></li>
                                        <li class="active"><a href="#">1</a></li>
                                        <li><a href="#">2</a></li>
                                        <li><a href="#">3</a></li>
                                        <li><a href="#">»</a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 第三个选项卡：事件统计 -->
            <div role="tabpanel" class="tab-pane fade" id="event-statistics">
                <div class="row">
                    <!-- 统计卡片 -->
                    <div class="col-md-3">
                        <div class="panel panel-primary">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-xs-3">
                                        <i class="fa fa-users fa-3x"></i>
                                    </div>
                                    <div class="col-xs-9 text-right">
                                        <div class="huge">45</div>
                                        <div>报名人数</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="panel panel-success">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-xs-3">
                                        <i class="fa fa-check-circle fa-3x"></i>
                                    </div>
                                    <div class="col-xs-9 text-right">
                                        <div class="huge">38</div>
                                        <div>实际到场</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="panel panel-warning">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-xs-3">
                                        <i class="fa fa-clock-o fa-3x"></i>
                                    </div>
                                    <div class="col-xs-9 text-right">
                                        <div class="huge">5</div>
                                        <div>迟到人数</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="panel panel-danger">
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-xs-3">
                                        <i class="fa fa-times-circle fa-3x"></i>
                                    </div>
                                    <div class="col-xs-9 text-right">
                                        <div class="huge">7</div>
                                        <div>缺席人数</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <!-- 新增出勤率统计表格 -->
                    <div class="col-md-8">
                        <table class="table table-striped table-hover attendance-stats">
                            <thead>
                                <tr class="info">
                                    <th>类型</th>
                                    <th>人数</th>
                                    <th>占比</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>正常出勤</td>
                                    <td>38</td>
                                    <td>76.0%</td>
                                </tr>
                                <tr>
                                    <td>迟到</td>
                                    <td>5</td>
                                    <td>10.0%</td>
                                </tr>
                                <tr>
                                    <td>缺席</td>
                                    <td>7</td>
                                    <td>14.0%</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- 每日出勤趋势图 -->
                </div>
                
                <!-- 详细统计表格 -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
                                    <i class="fa fa-table"></i> 详细出勤统计
                                </h4>
                            </div>
                            <div class="panel-body">
                                <div class="table-responsive">
                                    <table class="table table-striped table-bordered">
                                        <thead>
                                            <tr class="info">
                                                <th>日期</th>
                                                <th>应到人数</th>
                                                <th>实到人数</th>
                                                <th>迟到人数</th>
                                                <th>缺席人数</th>
                                                <th>出勤率</th>
                                                <th>状态</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>2024-01-15</td>
                                                <td>45</td>
                                                <td>38</td>
                                                <td>3</td>
                                                <td>7</td>
                                                <td><span class="label label-success">84.4%</span></td>
                                                <td><span class="label label-success">良好</span></td>
                                            </tr>
                                            <tr>
                                                <td>2024-01-22</td>
                                                <td>45</td>
                                                <td>42</td>
                                                <td>2</td>
                                                <td>3</td>
                                                <td><span class="label label-success">93.3%</span></td>
                                                <td><span class="label label-success">优秀</span></td>
                                            </tr>
                                            <tr>
                                                <td>2024-01-29</td>
                                                <td>45</td>
                                                <td>35</td>
                                                <td>5</td>
                                                <td>10</td>
                                                <td><span class="label label-warning">77.8%</span></td>
                                                <td><span class="label label-warning">一般</span></td>
                                            </tr>
                                            <tr>
                                                <td>2024-02-05</td>
                                                <td>45</td>
                                                <td>40</td>
                                                <td>3</td>
                                                <td>5</td>
                                                <td><span class="label label-success">88.9%</span></td>
                                                <td><span class="label label-success">良好</span></td>
                                            </tr>
                                            <tr>
                                                <td>2024-02-12</td>
                                                <td>45</td>
                                                <td>43</td>
                                                <td>1</td>
                                                <td>2</td>
                                                <td><span class="label label-success">95.6%</span></td>
                                                <td><span class="label label-success">优秀</span></td>
                                            </tr>
                                        </tbody>
                                        <tfoot>
                                            <tr class="warning">
                                                <td><strong>平均</strong></td>
                                                <td><strong>45</strong></td>
                                                <td><strong>39.6</strong></td>
                                                <td><strong>2.8</strong></td>
                                                <td><strong>5.4</strong></td>
                                                <td><strong><span class="label label-success">88.0%</span></strong></td>
                                                <td><strong><span class="label label-success">良好</span></strong></td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>


<style>
.huge {
    font-size: 40px;
    font-weight: bold;
}

.panel-body .row {
    margin: 0;
}

.nav-tabs {
    margin-bottom: 20px;
}

.tab-content {
    border: none;
}

.label {
    font-size: 11px;
}

.table th {
    background-color: #f5f5f5;
    font-weight: bold;
}

.pagination {
    margin: 0;
}

/* 增大事件统计详细出勤统计表格的行间距 */
#event-statistics .table tbody tr td,
#event-statistics .table thead tr th {
    padding-top: 18px;
    padding-bottom: 18px;
}

/* 新增样式，增加表格行间距 */
#event-registration .table tbody tr td,
#event-registration .table thead tr th {
    padding-top: 12px;
    padding-bottom: 12px;
}

/* 出勤统计表格美化 */
.attendance-stats {
    width: 100%;
    margin-bottom: 20px;
    text-align: left;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.attendance-stats th {
    background-color: #3498db;
    color: white;
    padding: 12px 15px;
    font-weight: 500;
}

.attendance-stats td {
    padding: 10px 15px;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: middle;
}

.attendance-stats tr:nth-child(even) {
    background-color: #f9f9f9;
}

.attendance-stats tr:hover {
    background-color: #f1f1f1;
}

.attendance-stats tr:last-child td {
    border-bottom: none;
}
</style>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            leftOptions: Config.leftOptions,
            rightOptions: Config.rightOptions
        }
    });
</script>
